<template>

  <div class="app-container">
    <h2 style="text-align: center;">文件上传历史</h2>
    <el-table
      :data="list"
      border
      fit
      highlight-current-row>
      class="file-history"
      <el-table-column
        label="序号"
        width="80"
        align="center">
        <template slot-scope="scope">
          {{ (page - 1) * limit + scope.$index + 1 }}
        </template>
      </el-table-column>

      <el-table-column prop="name" label="文件名称" />

      <el-table-column label="状态" width="100px">
        <template slot-scope="scope">
          {{
            scope.row.status===0?'未清洗':
            scope.row.status===1?'未分析':
          scope.row.status===2?'已完成':"已删除" }}
        </template>
      </el-table-column>

      <el-table-column prop="createTime" width="200" label="上传时间" />
      <!--
      <el-table-column prop="creanTime" label="清洗时间" width="160"/>

      <el-table-column prop="operateTime" label="分析时间" width="160" />
    -->
      <el-table-column label="查看结果" width="120" align="center">
        <template slot-scope="scope">
          <router-link v-if="scope.row.status===2" :to="'/analyze/show/'+scope.row.fid">
            <el-button type="primary" size="mini" icon="el-icon-edit">查询结果</el-button>
          </router-link>
          <template v-if="scope.row.status!==2">
            {{
              scope.row.status===0?'请清洗':
              scope.row.status===1?'请分析':
            scope.row.status===-1?'已删除':"" }}
          </template>
        </template>
      </el-table-column>
      <el-table-column label="操作" width="100" align="center">
        <template slot-scope="scope">
          <el-button v-if="scope.row.status===0" style="margin-bottom: 20px;" type="primary" size="mini" icon="el-icon-scissors" @click="cleanDataById(scope.$index,scope.row.fid)">清洗</el-button>
          <el-button v-if="scope.row.status===1" style="margin-bottom: 20px;" type="success" size="mini" icon="el-icon-data-line" @click=" analyzeDataById(scope.$index,scope.row.fid)">分析</el-button>
          <br v-if="scope.row.status!==2">
          <el-button type="danger" size="mini" icon="el-icon-delete" @click="removeDataById(scope.row.fid)">删除</el-button>
        </template>
      </el-table-column>
      <el-table-column label="文件下载" width="200" align="center" >
        <template slot-scope="scope">
          <el-button v-if="scope.row.status>=1" style="margin-bottom: 20px;width: 80%;" type="primary" size="mini" icon="el-icon-files" @click="downloadFile(scope.row.fid, 'clean')">下载清洗结果</el-button> <br>
          <el-button v-if="scope.row.status===2" style="width: 80%;" type="primary" size="mini" icon="el-icon-files" @click=" downloadFile(scope.row.fid,'analyze')">下载分析结果</el-button>
        </template>
      </el-table-column>
    </el-table>

    <!-- 分页 -->
    <el-pagination
      :current-page="page"
      :page-size="limit"
      :total="total"
      :page-sizes="[5,10, 20, 50]"
      style="padding: 30px 0; text-align: center;"
      layout="total, sizes, prev, pager, next, jumper"
      @current-change="handleCurrentChange"
      @size-change="handleSizeChange"
    />
  </div>
</template>
<script>
import analyze from '@/api/analyze'
import { getToken } from '@/utils/auth'
export default{
  // props: ['worklist'],
  data() {
    return {
      limit: 5,
      total: 0,
      list: null, // 查询之后接口返回集合
      page: 1, // 当前页
      courseQuery: {}, // 条件封装对象
      BASE_API: process.env.BASE_API // 接口API地址
    }
  },
  created() {
    this.getResult()
  },

  methods: {
    // 获取分析的结果
    getResult() {
      analyze.getAnalyzeHistory(this.page, this.limit)
        .then(response => {
          this.list = response.data.item
          this.total = response.data.total
        })
    },
    // 重置查询结果
    resetData() {
      this.courseQuery = {}
      this.getResult()
    },
    // 通过id删除
    removeDataById(id) {
      analyze.delete(id).then(response => {
        if (response.success) {
          this.$message({
            message: '删除成功',
            type: 'success'
          })
        } else {
          this.$message.error(response.message)
        }
        if ((this.total - 1) % 5 === 0) {
          this.handleCurrentChange(this.page - 1)
        } else {
          this.getResult()
        }
      })
    },

    cleanDataById(index, id) {
      analyze.clean(id).then(response => {
        if (response.success) {
          const h = this.$createElement
          this.$notify({
            title: '操作成功',
            message: h('i', { style: 'color: teal' }, '开始执行清洗任务'),
            type: 'success'
          })
        } else {
          this.$message.error(response.message)
        }
      })
    },

    analyzeDataById(index, id) {
      analyze.analyze(id).then(response => {
        if (response.success) {
          const h = this.$createElement
          this.$notify({
            title: '操作成功',
            message: h('i', { style: 'color: teal' }, '开始执行分析任务'),
            type: 'success'
          })
        } else {
          this.$message.error(response.message)
        }
      })
    },
    handleSizeChange(val) {
      this.limit = val
      this.page = 1
      this.getResult()
    },
    handleCurrentChange(val) {
      this.page = val
      this.getResult()
    },
    async downloadFile(id, type) {
      let url = ''
      if (type === 'clean') {
        url = process.env.BASE_API + '/file/download/' + id + '/clean'
      } else if (type === 'analyze') {
        url = process.env.BASE_API + '/file/download/' + id + '/analyze'
      }
      const request = {
        method: 'GET',
        headers: {
          'token': getToken()
        }
      }
      const response = await fetch(url, request)
      const filename = response.headers.get('Content-Disposition').split(';')[1].split('=')[1]
      const blob = await response.blob()
      const link = document.createElement('a')
      link.download = decodeURIComponent(filename)
      link.style.display = 'none'
      link.href = URL.createObjectURL(blob)
      document.body.appendChild(link)
      link.click()
      URL.revokeObjectURL(link.href)
      document.body.removeChild(link)
    }
  }
}
</script>

<style lang="scss">
.file-history{
  .operate-item{
    display: flex;
    flex-direction: column;
    align-items: center;
  }
  .download-item{
    display: flex;
    flex-direction: column;
    align-items: center;
  }
}
</style>
